<template>
  <!-- 成员管理组件 -->
  <div class="memberTemplate">
    <ContentWrap style="padding-top: 0">
      <div class="button-container" style="padding-top: 0">
        <Button type="primary" :loading="loading" @click="add">添加成员</Button>
        <Button type="danger" :loading="loading" @click="delet">删除成员</Button>
      </div>
      <table-box
        ref="table"
        show-selection
        :no-request="false"
        :table-config="tableConfig"
        @selection-change="handlerSelectionChange"
      >
      </table-box>
      <el-dialog
        title="添加成员"
        :visible.sync="dialogVisible"
        width="65%"
        @open="openSinga"
        @close="closeDailog"
      >
        <FormContainer v-if="dialogVisible" :column="4">
          <el-form ref="staffForm" :model="staffData" :rules="formRules" label-width="80px">
            <el-form-item prop="id" label="坐席姓名">
              <SearchSelectPicker
                url="/call-center/api/v1/staffInfo/page"
                placeholder="请选择"
                lable-name="staffName"
                value-name="accountNo"
                :current-id.sync="staffData.id"
              ></SearchSelectPicker>
            </el-form-item>
            <el-form-item prop="accountNo" label="账号">
              <el-input v-model="staffData.accountNo" placeholder="请输入账号" clearable />
            </el-form-item>
            <el-form-item prop="staffCode" label="员工编号">
              <el-input v-model="staffData.staffCode" placeholder="请输入员工编号" clearable />
            </el-form-item>
            <el-form-item prop="organization" label="用户组织关系">
              <el-input v-model="staffData.organization" placeholder="请输入用户组织关系" clearable />
            </el-form-item>
            <el-form-item prop="state" label="状态">
              <el-select v-model="staffData.state" clearable filterable>
                <el-option label="启用" value="1" />
                <el-option label="离职" value="2" />
                <el-option label="停用" value="3" />
              </el-select>
            </el-form-item>
            <el-form-item prop="platformNo" label="平台工号">
              <el-input v-model="staffData.platformNo" placeholder="请输入平台工号" clearable />
            </el-form-item>
            <el-form-item>
              <Button type="primary" enter :loading="loading" @click="queryHandle('staffForm')">查询</Button>
            </el-form-item>
          </el-form>
        </FormContainer>
        <table-box
          v-if="dialogVisible"
          ref="staffTable"
          :no-request="true"
          show-selection
          :table-config="staffTableConfig"
          :other-filters="filterParams"
          @selection-change="handlerSelectStaffSelectionChange"
        >
        </table-box>
        <span slot="footer" class="dialog-footer">
          <Button @click="closeDailog">取 消</Button>
          <Button type="primary" @click="confirmAdd">确 定</Button>
        </span>
      </el-dialog>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import { postMembers, deleteMembers } from '@/api/department'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import { filtersRaw } from '@/utils'
export default {
  name: 'MemberTemplate',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    SearchSelectPicker
  },
  props: {
    text: {
      type: String,
      default: '组织'
    },
    type: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      staffData: {
        id: '',
        seatsName: '',
        staffCode: '',
        staffName: '',
        accountNo: '',
        platformNo: '',
        state: '',
        organization: ''
      },
      formRules: {},
      deptId: '',
      tableConfig: {
        interfacePath: `/call-center/api/v1/departmentInfo/member/page/${this.$route.params.id}`,
        pageFlag: true,
        hideFuncBar: true,
        tabIndex: 0,
        setting: [
          {
            prop: 'index',
            label: '序号',
            width: 80,
            formatData: function(val) {
              return val.keyIndex + 1
            }
          },
          {
            prop: 'staffName',
            label: '用户',
            formatData: val => {
              return `${val.staffName}(${val.accountNo})`
            }
          },
          {
            prop: 'staffName',
            label: '用户姓名'
          },
          {
            prop: 'accountNo',
            label: '账号'
          },
          {
            prop: 'staffCode',
            label: '员工编号'
          },
          {
            prop: 'organization',
            label: '用户组织关系',
            minWidth: 120,
            formatData: row => {
              if (row.hasOwnProperty('organization')) return row.organization
              return '--'
            }
          },
          {
            prop: 'state',
            label: '状态',
            formatData: row => {
              if (row.state === 1) return '启用'
              if (row.state === 2) return '离职'
              if (row.state === 3) return '停用'
            }
          },
          {
            prop: 'platformNo',
            label: '平台工号'
          }
        ]
      },
      staffTableConfig: {
        interfacePath: `/call-center/api/v1/staffInfo/page`,
        pageFlag: true,
        hideFuncBar: true,
        sort: 'accountNo',
        order: 'desc',
        tabIndex: 1,
        // 表格字段动态配置
        setting: [
          {
            prop: 'index',
            label: '序号',
            width: 80,
            formatData: function(val) {
              return val.keyIndex + 1
            }
          },
          {
            prop: 'staffName',
            label: '坐席姓名',
            formatData: val => {
              return `${val.staffName}(${val.accountNo})`
            }
          },
          {
            prop: 'staffName',
            label: '姓名'
          },
          {
            prop: 'accountNo',
            label: '账号'
          },
          {
            prop: 'staffCode',
            label: '员工编号'
          },
          {
            prop: 'organization',
            label: '用户组织关系',
            minWidth: 120,
            formatData: row => {
              if (row.hasOwnProperty('organization')) return row.organization
              return '--'
            }
          },
          {
            prop: 'state',
            label: '状态',
            formatData: row => {
              if (row.state === 1) return '启用'
              if (row.state === 2) return '离职'
              if (row.state === 3) return '停用'
            }
          },
          {
            prop: 'platformNo',
            label: '平台工号'
          }
        ]
      },
      filterParams: [],
      selectArr: [],
      selectedStaffAry: []
    }
  },
  created() {
    if (this.$route.params.id === '' || this.$route.params.id === undefined) {
      this.$router.go(-1)
      return false
    }
    this.deptId = this.$route.params.id
  },
  mounted() {},
  methods: {
    // 根据条件查询
    queryHandle(formName) {
      const list = []
      for (const i in this.staffData) {
        if (this.staffData[i] || this.staffData[i] === 0) {
          if (i === 'id') {
            list.push(filtersRaw(i, this.staffData[i], '='))
          } else {
            list.push(filtersRaw(i, this.staffData[i], 'like'))
          }
        }
      }
      this.filterParams = list
      this.$nextTick(() => {
        this.$refs.staffTable.initTableData('opCondition')
      })
    },
    // 关闭弹窗
    closeDailog() {
      this.selectedStaffAry = []
      // this.$refs.staffForm.resetFields()
      this.dialogVisible = false
      this.staffData = {
        seatsName: '',
        staffCode: '',
        staffName: '',
        accountNo: '',
        platformNo: '',
        state: '',
        organization: ''
      }
    },
    // 打开添加弹窗
    add() {
      this.dialogVisible = true
    },
    /**
     * diglog 打开时初始化数据
     */
    openSinga() {
      this.selectedStaffAry = []
      if (this.$refs.staffForm) this.$refs.staffTable.initTableData()
    },
    // 删除成员
    delet() {
      if (this.selectArr.length) {
        const currentSelect = [...this.selectArr]
        const ids = []
        currentSelect.forEach(element => {
          ids.push(element.id)
        })
        this.$msgbox({
          title: '提示',
          showCancelButton: true,
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          message: `确定将所选择成员移出该${this.text}？`
        })
          .then(() => {
            deleteMembers(ids).then(res => {
              if (res.success === 1) {
                this.$refs.table.initTableData()
                this.$message({
                  message: '删除成功',
                  type: 'success'
                })
              }
            })
          })
          .catch(e => e)
      } else {
        this.$message('请选择需要删除的人员')
      }
    },
    // 业务组新增人员
    confirmAdd() {
      if (this.selectedStaffAry.length) {
        const deptId = this.$route.params.id
        const selectArr = [...this.selectedStaffAry]
        selectArr.forEach(element => {
          element.deptId = deptId
          delete element.keyIndex
        })
        postMembers(deptId, selectArr).then(res => {
          if (res.success === 1) {
            this.$refs.table.initTableData()
            this.closeDailog()
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          }
        })
      } else {
        this.$message('请选择需要添加的人员')
      }
    },
    handlerSelectionChange(selection) {
      this.selectArr = selection
    },
    /**
     * 点击Staffcheckbox
     */
    handlerSelectStaffSelectionChange(selection) {
      this.selectedStaffAry = selection
    },
    /**
     * 格式化状态显示
     */
    statusFormatter(row, column) {
      if (row.state === 1) return '启用'
      if (row.state === 2) return '离职'
      if (row.state === 3) return '停用'
    },
    /**
     * 组织关系处理
     */
    orgFormatter(row, column) {
      if (row.hasOwnProperty('organization')) return row.organization
      return '--'
    }
  }
}
</script>
<style lang='scss' module>
</style>
